<template>
  <div class="trade-container">
    <h3 class="title">填写并核对订单信息</h3>
    <div class="content">
      <h5 class="receive">收件人信息</h5>
      <div class="address clearFix">
        <el-form :model="addressForm" :rules="rules" ref="addressForm">
          <el-form-item class="input-text clearFix" prop="name">
            <el-input
              type="text"
              placeholder="请输入姓名"
              v-model="addressForm.name"
            />
          </el-form-item>
          <el-form-item class="input-text clearFix" prop="tel">
            <el-input
              type="text"
              placeholder="请输入电话"
              v-model="addressForm.tel"
            />
          </el-form-item>
          <el-form-item class="input-text clearFix" prop="address">
            <el-input
              type="text"
              placeholder="请输入地址"
              v-model="addressForm.address"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="line"></div>
      <h5 class="pay">支付方式</h5>
      <div class="address clearFix">
        <span class="username selected">在线支付</span>
      </div>
      <div class="line"></div>
      <h5 class="pay">送货清单</h5>
      <div class="detail">
        <h5>商品清单</h5>
        <ul
          class="list clearFix"
          v-for="(item, index) in orderInfo.detailArrayList"
          :key="index"
        >
          <li>
            <img
              :src="item.imgUrl"
              alt=""
              style="width: 100px; height: 100px"
            />
          </li>
          <li>
            <p>
              {{ item.skuName }}
            </p>
            <h4>7天无理由退货</h4>
          </li>
          <li>
            <h3>￥{{ item.orderPrice }}.00</h3>
          </li>
          <li>X{{ item.skuNum }}</li>
          <li>有货</li>
        </ul>
      </div>
      <div class="bbs">
        <h5>买家留言：</h5>
        <textarea
          placeholder="建议留言前先与商家沟通确认"
          class="remarks-cont"
          v-model="message"
        ></textarea>
      </div>
      <div class="line"></div>
    </div>
    <div class="money clearFix">
      <ul>
        <li>
          <b
            ><i>{{ orderInfo.totalNum }}</i
            >件商品，总商品金额</b
          >
          <span>¥{{ orderInfo.totalAmount }}.00</span>
        </li>
      </ul>
    </div>
    <div class="trade">
      <div class="price">
        应付金额:　<span>¥{{ orderInfo.totalAmount }}.00</span>
      </div>
      <div class="receiveInfo">
        寄送至:
        <span>{{ addressForm.address }}</span>
        收货人：<span>{{ addressForm.name }}</span>
        <span>{{ addressForm.tel }}</span>
      </div>
    </div>
    <div class="sub clearFix">
      <a class="subBtn" @click="submitOrder('addressForm')">提交订单</a>
    </div>
  </div>
</template>
<script>
import { reqAddressInfo, reqOrderInfo, reqSubmitOrder } from "@/api";
export default {
  name: "trade",
  data() {
    const mobileReg = /^1[0-9]{10}$/;
    const validateMobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!mobileReg.test(this.addressForm.tel)) {
        callback(new Error("手机格式错误"));
      } else {
        callback();
      }
    };
    return {
      orderInfo: {},
      addressForm: {
        name: "",
        tel: "",
        address: "",
      },
      message: "",
      //订单号
      orderId: "",
      rules: {
        name: { required: true, message: "请输入姓名", trigger: "blur" },
        address: { required: true, message: "请输入地址", trigger: "blur" },
        tel: { required: true, validator: validateMobile, trigger: "blur" },
      },
    };
  },
  mounted() {
    this.getorderData();
  },
  methods: {
    getAddressData() {
      reqAddressInfo()
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getorderData() {
      reqOrderInfo()
        .then((res) => {
          if (res.code == 200) {
            this.orderInfo = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitOrder(formName) {
      // 交易编码

      let { tradeNo } = this.orderInfo;
      
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 其余参数
          let data = {
            consignee: this.addressForm.name,
            consigneeTel: this.addressForm.tel,
            deliveryAddress: this.addressForm.address,
            paymentWay: "ONLINE", //支付方式
            orderComment: this.msg, //买家的留言信息
            orderDetailList: this.orderInfo.detailArrayList, //商品清单
          };
          reqSubmitOrder(tradeNo, data)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.message,
                  type: "success",
                });

                this.orderId = res.data;
                this.$router.push('/pay?orderId='+this.orderId)
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 21px;
}
.content {
  width: 1200px;
  margin: 10px auto 0;
  border: 1px solid rgb(221, 221, 221);
  padding: 25px;
  box-sizing: border-box;
  .receive,
  .pay {
    line-height: 36px;
    margin: 18px 0;
  }
  .address {
    padding-left: 20px;
    margin-bottom: 15px;
    .username {
      float: left;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #ddd;
      position: relative;
    }
    .username::after {
      content: "";
      display: none;
      width: 13px;
      height: 13px;
      position: absolute;
      right: 0;
      bottom: 0;
      background: url(~@/assets/images/choosed.png) no-repeat;
    }
    .username.selected {
      border-color: #e1251b;
    }
    .username.selected::after {
      display: block;
    }
    p {
      width: 610px;
      float: left;
      line-height: 30px;
      margin-left: 10px;
      padding-left: 5px;
      cursor: pointer;
      .s1 {
        float: left;
      }
      .s2 {
        float: left;
        margin: 0 5px;
      }
      .s3 {
        float: left;
        width: 56px;
        height: 24px;
        line-height: 24px;
        margin-left: 10px;
        background-color: #878787;
        color: #fff;
        margin-top: 3px;
        text-align: center;
      }
    }
    p:hover {
      background-color: #ddd;
    }
    /deep/ .el-input__inner {
      width: 40%;
    }
  }
  .line {
    height: 1px;
    background-color: #ddd;
  }
  .way {
    width: 1080px;
    height: 110px;
    background: #f4f4f4;
    padding: 15px;
    margin: 0 auto;
    h5 {
      line-height: 50px;
    }
    .info {
      margin-top: 20px;
      .s1 {
        float: left;
        border: 1px solid #ddd;
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-right: 10px;
      }
      p {
        line-height: 30px;
      }
    }
  }
  .detail {
    width: 1080px;

    background: #feedef;
    padding: 15px;
    margin: 2px auto 0;
    h5 {
      line-height: 50px;
    }
    .list {
      display: flex;
      justify-content: space-between;
      li {
        line-height: 30px;
        p {
          margin-bottom: 20px;
        }
        h4 {
          color: #c81623;
          font-weight: 400;
        }
        h3 {
          color: #e12228;
        }
      }
    }
  }
  .bbs {
    margin-bottom: 15px;
    h5 {
      line-height: 50px;
    }
    textarea {
      width: 100%;
      border-color: #e4e2e2;
      line-height: 1.8;
      outline: none;
      resize: none;
      padding: 10px;
    }
  }
  .bill {
    h5 {
      line-height: 50px;
    }
    div {
      padding-left: 15px;
    }
  }
}
.money {
  width: 1200px;
  margin: 20px auto;
  ul {
    width: 220px;
    float: right;
    li {
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      i {
        color: red;
      }
    }
  }
}
.trade {
  box-sizing: border-box;
  width: 1200px;
  padding: 10px;
  margin: 10px auto;
  text-align: right;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  div {
    line-height: 30px;
  }
  .price span {
    color: #e12228;
    font-weight: 700;
    font-size: 14px;
  }
  .receiveInfo {
    color: #999;
  }
}
.sub {
  width: 1200px;
  margin: 0 auto 10px;
  .subBtn {
    float: right;
    width: 164px;
    height: 56px;
    font: 700 18px "微软雅黑";
    line-height: 56px;
    text-align: center;
    color: #fff;
    background-color: #e1251b;
  }
}
</style>